<template>
  <div class="_wz_cent_main">
    <div class="_wz_personalDetails">
      <div style="width: 500px;margin: auto;">
        <Form ref="userInfoS" :model="alterUserInfoData" label-position="right" :label-width="120" :rules="validateuserInfo">
          <FormItem label="头像">
            <Upload :before-upload="businessLicense" action="" style="color: #2d8cf0;cursor: pointer;">
              <div class="demo-upload-list">
                <img :src="logoUrl" @error="public.imgDispose">
              </div>
            </Upload>

          </FormItem>
          <FormItem label="用户名称" prop="name">
            <i-input v-model="alterUserInfoData.name" placeholder="用户名称" clearable />
          </FormItem>
          <FormItem label="联系电话" prop="mobile">
            <i-input v-model="alterUserInfoData.mobile" placeholder="联系电话" clearable />
          </FormItem>
          <FormItem label="邮箱地址" prop="email">
            <i-input v-model="alterUserInfoData.email" placeholder="邮箱地址" clearable />
          </FormItem>
          <FormItem>
            <Button type="primary" @click="userInfoOk">确定</Button>
          </FormItem>
        </Form>

      </div>
    </div>
    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>
  export default {
    inject: ['updatingUserData'],//注入
    data() {
      return {
        spinShow:false,//本页加载
        logoUrl: '',
        alterUserInfoData: {},//修改用户信息
        validateuserInfo: {
          name: [
            {required: true, message: '请输入用户名称', trigger: 'blur'},
          ],
          mobile: [
            {required: true, message: '请输入联系电话', trigger: 'blur'},
            {
              validator: (rule, value, callBack) => {
                /^[1][0-9]{10}$/.test(value) ? callBack() : callBack('请输入正确的联系电话')
              }, trigger: 'blur'
            }
          ],
          email: [
            {required: true, message: '请输入邮箱地址', trigger: 'blur'},
            {
              validator: (rule, value, callBack) => {
                /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value) ? callBack() : callBack('请输入正确的邮箱地址')
              }, trigger: 'blur'
            }
          ],
        },
        userInfoData: null,//用户信息
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var data = JSON.parse(sessionStorage.getItem('loginData')).user;
      this.alterUserInfoData = data;
      this.logoUrl = !!data.logoUrl ? this.apiUrl.imgUrl + data.logoUrl : '../../static/img/zwtpxd.png';

    },
    methods: {//执行的方法
      userInfoOk() {//个人信息提交
        let that = this;
        that.$refs["userInfoS"].validate((valid) => {
          if (valid) {
            that.spinShow = true;
            delete that.alterUserInfoData.logoUrl
            that.axios.post(that.apiUrl.systemUserSystemUserSaveOrUpdate, that.alterUserInfoData).then(res => {
              that.spinShow = false;
              if (!!res) {
                that.$Message.success('保存成功');
                //调用父级方法 更新外侧数据
                that.updatingUserData(); // 调用父组件的beiChildMethod()方法

              }
            }).catch(err => {
              console.log('失败', err);
            })
          } else {
            that.$Message.error('请正确填写表单');
          }
        })
      },
      businessLicense(file) {//
        let that = this;
        let type = file.type.split("/")[0];
        if (type == "image") {//图片

          let formData = new FormData();
          formData.append('logoFile', file);

          that.logoUrl = window.URL.createObjectURL(file);
          that.axios.post(that.apiUrl.systemLoginUpdateLogo, formData, {headers: {'Content-Type': "application/x-www-form-urlencoded"}}).then(res => {
            if (!!res) {
              //调用父级方法 更新外侧数据
              that.updatingUserData(); // 调用父组件的beiChildMethod()方法
            }
          }).catch(err => {
            console.log('失败', err);
          })


        } else {
          that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
        }
        return false;
      },
    },
    watch: {//监听

    },
    props: {//接收来自父组件的数据

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_personalDetails {
    padding: 30px 0 0 0;
    width: 100%;
    height: 100%;
    background: #fff;

    .demo-upload-list {
      display: inline-block;
      height: 90px;
      width: 90px;
      text-align: center;
      line-height: 80px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      border: 1px solid rgba(0, 0, 0, .2);
      margin-right: 4px;

      img {
        width: 100%;
        height: 100%;
      }

      .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);

        i {
          color: #fff;
          font-size: 20px;
          cursor: pointer;
          margin: 0 2px;
        }
      }
    }

    .demo-upload-list:hover .demo-upload-list-cover {
      display: block;
    }
  }
</style>
